import React, { useState, useEffect } from 'react';
import { Sidebar, Toast, NavBar, Card } from 'react-vant';
import { ShoppingCartO } from '@react-vant/icons';
import '../css/cart.css';
import { history } from 'umi';
import axios from 'axios';

export default function Cart() {
  // 获取数据
  const [data, setdata] = useState([]);

  const getdata = async () => {
    let { data } = await axios.get('http://localhost:3000/yrt/datalist');
    setdata(data.data);
  };

  useEffect(() => {
    getdata();
  }, []);
  const [active, setActive] = useState(0);
  const fan = () => {
    history.push('/index/dui');
  };
  return (
    <div style={{ height: '100%' }}>
      <NavBar
        leftText="分类"
        rightText=<ShoppingCartO fontSize={'25px'} />
        onClickLeft={fan}
        onClickRight={() => Toast('按钮')}
        style={{
          background: 'rgb(43, 205, 221)',
        }}
      />
      <Sidebar
        value={active}
        onChange={(v) => {
          setActive(v);
          Toast.info(`内容区 ${v + 1}`);
        }}
      >
        <Sidebar.Item
          contentStyle={{
            backgroundColor: '#e3e3e3',
            padding: '18px 10px',
            height: '600px',
          }}
          title="家居饰品"
        >
          <Card style={{ marginBottom: '15px' }}>
            <Card.Header>
              <p style={{ borderLeft: '3px solid red', paddingLeft: '10px' }}>
                家居
              </p>
            </Card.Header>
            <Card.Body style={{ height: '100px' }}>
              <div className="qqq">
                <div className="content-content">
                  <img
                    className="contentimg"
                    src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/%E9%A6%96%E9%A1%B5/%E5%95%86%E5%93%81%E5%9B%BE_u158-0.png"
                    alt=""
                  />
                  <div className="contenttitle">
                    <div className="zi">200币</div>
                    <div className="btnadd">＋</div>
                  </div>
                </div>
                <div className="content-content">
                  <img
                    className="contentimg"
                    src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/%E9%A6%96%E9%A1%B5/%E5%95%86%E5%93%81%E5%9B%BE_u158-0.png"
                    alt=""
                  />
                  <div className="contenttitle">
                    <div className="zi">200币</div>
                    <div className="btnadd">＋</div>
                  </div>
                </div>
              </div>
            </Card.Body>
          </Card>
          <Card>
            <Card.Header>
              <p style={{ borderLeft: '3px solid red', paddingLeft: '10px' }}>
                饰品
              </p>
            </Card.Header>
            <Card.Body>
              <div className="qqq">
                <div className="content-content">
                  <img
                    className="contentimg"
                    src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/%E9%A6%96%E9%A1%B5/%E5%95%86%E5%93%81%E5%9B%BE_u158-0.png"
                    alt=""
                  />
                  <div className="contenttitle">
                    <div className="zi">200币</div>
                    <div className="btnadd">＋</div>
                  </div>
                </div>
                <div className="content-content">
                  <img
                    className="contentimg"
                    src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/%E9%A6%96%E9%A1%B5/%E5%95%86%E5%93%81%E5%9B%BE_u158-0.png"
                    alt=""
                  />
                  <div className="contenttitle">
                    <div className="zi">200币</div>
                    <div className="btnadd">＋</div>
                  </div>
                </div>
              </div>
            </Card.Body>
          </Card>
        </Sidebar.Item>
        <Sidebar.Item
          contentStyle={{
            backgroundColor: '#e3e3e3',
            padding: '18px 10px',
            height: '600px',
          }}
          title="厨卫用品"
        >
          <Card style={{ marginBottom: '15px' }}>
            <Card.Header>
              <p style={{ borderLeft: '3px solid red', paddingLeft: '10px' }}>
                厨房用品
              </p>
            </Card.Header>
            <Card.Body>卡片内容区域</Card.Body>
          </Card>
          <Card>
            <Card.Header>
              <p style={{ borderLeft: '3px solid red', paddingLeft: '10px' }}>
                卫浴用品
              </p>
            </Card.Header>
            <Card.Body>卡片内容区域</Card.Body>
          </Card>
        </Sidebar.Item>
        <Sidebar.Item
          contentStyle={{
            backgroundColor: '#e3e3e3',
            padding: '18px 10px',
            height: '600px',
          }}
          title="垃圾处理"
        >
          <Card style={{ marginBottom: '15px' }}>
            <Card.Header>卡片标题</Card.Header>
            <Card.Body>卡片内容区域</Card.Body>
          </Card>
          <Card>
            <Card.Header>卡片标题</Card.Header>
            <Card.Body>卡片内容区域</Card.Body>
          </Card>
        </Sidebar.Item>
        <Sidebar.Item
          contentStyle={{
            backgroundColor: '#e3e3e3',
            padding: '18px 10px',
            height: '600px',
          }}
          title="家用电器"
        >
          <Card style={{ marginBottom: '15px' }}>
            <Card.Header>卡片标题</Card.Header>
            <Card.Body>卡片内容区域</Card.Body>
          </Card>
          <Card>
            <Card.Header>卡片标题</Card.Header>
            <Card.Body>卡片内容区域</Card.Body>
          </Card>
        </Sidebar.Item>
      </Sidebar>
    </div>
  );
}
